<template>
	<div class="fm-page">
		<div class="fm-bar">
			<el-dropdown trigger="click" @command="handleCommand">
				<div class="el-dropdown-sw flex-center">
					<img :src="swIcon"><span>{{swText}}</span><i class="el-icon-arrow-down el-icon--right"></i>
				</div>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item :command="beforeHandleCommand('CN')">
						<div class="drop-flex-item">
							<img src="../../assets/images/cn.png"><span>CN</span>
						</div>
					</el-dropdown-item>
					<el-dropdown-item :command="beforeHandleCommand('EN')">
						<div class="drop-flex-item">
							<img src="../../assets/images/en.png"><span>EN</span>
						</div>
					</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
		<div class="fm-main">
			<div class="fm-title">欢迎注册</div>
			<el-form ref="form" :model="form" :rules="rules">
				<div class="form-row">
					<el-form-item prop="user">
						<div class="ico iconfont icon-yonghuming"></div>
						<el-input placeholder="6-16位数字和字母组合，字母开头" v-model="form.user"></el-input>
					</el-form-item>
				</div>
				<div class="form-row">
					<el-form-item prop="pwd">
						<div class="ico iconfont icon-_mima2"></div>
						<el-input placeholder="6-16位密码，字母区分大小写" v-model="form.pwd"></el-input>
					</el-form-item>
				</div>
				<div class="form-row">
					<el-form-item prop="repwd">
						<div class="ico iconfont icon-querenmima"></div>
						<el-input placeholder="确认密码" v-model="form.repwd"></el-input>
					</el-form-item>
				</div>
				<div class="form-row">
					<el-form-item prop="tlink">
						<div class="ico iconfont icon-tlink"></div>
						<el-input placeholder="推广码" v-model="form.tlink"></el-input>
					</el-form-item>
				</div>
				<div class="form-row">
					<el-form-item prop="phone">
						<div class="select-left">
							<el-select v-model="xhvalue" placeholder="请选择" popper-class="xhselect">
								<el-option
								v-for="item in options"
								:key="item.value"
								:label="item.label"
								:value="item.value">
								</el-option>
							</el-select>
						</div>
						<el-input placeholder="手机号码" v-model="form.phone"></el-input>
					</el-form-item>
				</div>
				<div class="form-row">
					<el-form-item prop="code">
						<div class="ico iconfont icon-yanzhengma"></div>
						<el-input placeholder="验证码" v-model="form.code"></el-input>
						<div class="form-code flex-center">
							<div class="code-box"><img src="../../assets/images/code.png"></div>
							<div class="iconfont icon-shuaxin"></div>
						</div>
					</el-form-item>
				</div>
				<div class="form-row flex-center flex-zBetween">
					<el-switch v-model="form.sw" active-text="记住账号" active-color="#00a653" inactive-color="#999">
					</el-switch>
				</div>
				<div class="form-check flex">
					<el-checkbox v-model="checked"></el-checkbox>
					<div class="check-span">我已年满18岁，并同意投注相关规范以及<span class="serv-link text-green" @click="dialogVisible = true">《服务条款》</span></div>
				</div>
				<div class="form-foot">
					<el-button @click="submitForm('form')" type="success">立即注册</el-button>
					<div class="form-link">
						还没有账号？<router-link to="/login">点击登录</router-link>
					</div>
				</div>
			</el-form>
		</div>
		<div class="fm-wel">
			Welcome back<br>Football
		</div>
		<!-- 弹出 -->
		<el-dialog custom-class="bs-dialog bs-rule-dialog" title="服务条款" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<div class="art-body ">
				<p>为了让您每一天都能尽情享受AFC娱乐提供的最佳服务与体验。</p>
				<p>AFC提醒您：在使用AFC提供的服务前，请您务必仔细阅读并透彻理解本服务条款。如果您不接受以下服务条款，请您切勿在AFC进行注册或游戏。</p>
				<p>如果您使用AFC提供的服务，您的使用行为将被视为对本服务条款全部内容的认可。</p>
				<p>定义：
				（一）：以下条规适用于用户使用、连接和参与不时由AFC(统称 " AFC"、"我们" 及 "我们的", 视具体情况而定) 通过经营的其他网站 ("游戏网站") 提供的网上 "玩真钱" 模式的游戏服务 ("游戏服务")。本条规须与特定游戏的游戏规则 (统称 "游戏规则") 及适用于游戏服务和游戏软件的使用及与连接进入游戏网站和其中所含游戏信息的其他条规 (统称 "本条规") 一并阅读。<br>
				（二）："游戏" 就本条规而言, 包括但不限于通过游戏网站提供的任何游戏服务进行的投注、游戏及各类游戏活动; "连接设备" 指任何应用连接设备, 包括但不限于为使用和连接游戏网站、参与游戏服务而采用的个人电脑、笔记本电脑、移动电话、个人数码助理、PDA电话、手提设备。"游戏软件" 指经监管机关批准的、安装在用户连接设备上的电脑程序、数据文件或任何其他资讯及信息内容 (包括与之有关的任何用户信息), 以便用户通过用户连接设备使用、连接和参与在游戏网站上提供的游戏服务; "体育游戏" 指游戏网站下 "体育游戏" 链接或标题项下接入或提供的互联网游戏系统, 及所有与其相关的服务和网上游戏活动。</p>
				<p>同意：<br>
				（三）：用户在注册过程中已阅读"相关条款和隐私政策", 勾选相关按钮点击注册后即表示用户确认并同意本条规及本条规构成用户与AFC之间关于游戏服务使用的具有法律约束力的协议 ("使用协议")。</p>
		
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="dialogVisible = false">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	// @ is an alias to /src
	export default {
		name: 'Home',
		components: {},
		data() {
			return {
				dialogVisible:false,
				swIcon: require('../../assets/images/cn.png'),
				swText: 'CN',
				checked:true,
				form: {
					user: '',
					pwd: '',
					code: '',
					phone: '',
					tlink: '',
					repwd: '',
					sw: true,
				},
				rules: {
					user: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}, ],
					pwd: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}, ],
					repwd: [{
						required: true,
						message: '请输入确认密码',
						trigger: 'blur'
					}, ],
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}, ],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}, ],
				},
				options: [{
				value: '86',
				label: '86'
				}, {
				value: '10',
				label: '10'
				}, {
				value: '11',
				label: '11'
				}, {
				value: '12',
				label: '12'
				}, {
				value: '13',
				label: '13'
				}],
				xhvalue: '86'
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			handleCommand(command) {
				switch (command.command) {
					case 'CN':
						this.swIcon = require('../../assets/images/cn.png')
						this.swText = 'CN'
						break;
					case 'EN':
						this.swIcon = require('../../assets/images/en.png')
						this.swText = 'EN'
						break;
					default:
						break;
				}
			},
			beforeHandleCommand(command) {
				return {
					'command': command
				}
			},
		}
	}
</script>
